<template>
  <div id="sideBar">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
    >
      <el-submenu
        v-for="route in routes"
        :key="route.path"
        :index="route.path"
      >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ route.meta.title }}</span>
        </template>
        <el-menu-item
          v-for="sub in route.children"
          :key="sub.path"
          :index="route.path + '/' + sub.path"
        >
          {{ sub.meta.title }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import routes from '@/router/routes'

export default {
  name: 'sideBar',
  computed: {
    routes() {
      return routes.filter(item => item.path !== '/')
    }
  },
  created() {
    console.log(this.routes)
  }
}
</script>

<style lang="scss" scoped></style>
